<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>学生信息管理系统</title>
  <!-- 模块顺序会造成影响 ！！ -->
  <!-- 引入外部的样式文件 -->
  <link rel="stylesheet" href="./css/index.css">
  <!-- 引入Element UI样式 -->
  <link rel="stylesheet" href="https://unpkg.com/element-ui/lib/theme-chalk/index.css">
  <!-- 使用CDN引入Vue模块 -->
  <script src="https://cdn.jsdelivr.net/npm/vue/dist/vue.js"></script>
  <!-- 引入Element UI组件库 -->
  <script src="https://unpkg.com/element-ui/lib/index.js"></script>
  <!-- 引入Axios组件库 -->
  <script src="https://unpkg.com/axios/dist/axios.min.js"></script>
</head>

<body>
  <div id="app">
    <el-container>
      <el-header style="height: 80px;">学生信息管理系统</el-header>
      <el-container>
        <el-aside width="200px">
          <el-menu default-active="2" class="el-menu-vertical-demo">
            <el-menu-item index="1">
              <i class="el-icon-menu"></i>
              <span slot="title">班级管理</span>
            </el-menu-item>
            <el-menu-item index="2">
              <i class="el-icon-user"></i>
              <span slot="title">学生信息</span>
            </el-menu-item>
            <el-menu-item index="3">
              <i class="el-icon-s-custom"></i>
              <span slot="title">讲师信息</span>
            </el-menu-item>
            <el-menu-item index="4">
              <i class="el-icon-date"></i>
              <span slot="title">课程管理</span>
            </el-menu-item>
          </el-menu></el-aside>
        <el-container>
          <!-- 主窗体 -->
          <el-main>
            <!-- 面包屑导航 -->
            <el-breadcrumb separator-class="el-icon-arrow-right">
              <el-breadcrumb-item>首页</el-breadcrumb-item>
              <el-breadcrumb-item>学生信息</el-breadcrumb-item>
            </el-breadcrumb>
            <!-- 表单 -->
            <el-form :inline="true" style="margin-top: 20px;">
              <el-row>
                <el-col :span="12">
                  <el-form-item label="请输入查询条件：">
                    <el-input v-model="inputStr" placeholder="输入查询条件" style="width: 420px;"></el-input>
                  </el-form-item>
                </el-col>
                <el-col :span="8" style="text-align: right; padding-right: 10px;">
                  <el-button-group>
                    <el-button type="primary" icon="el-icon-search" @click="queryStudents()">查询</el-button>
                    <el-button type="primary" icon="el-icon-tickets" @click="getAllStudents()">全部</el-button>
                    <el-button type="primary" icon="el-icon-circle-plus-outline" @click="addStudent()">添加</el-button>
                  </el-button-group>
                </el-col>
                <el-col :span="2" style="text-align: right; padding-right: 5px;">
                  <el-upload action="" :show-file-list="false" :http-request="uploadExcelPost">
                    <el-button type="primary">导入Excel</el-button>
                  </el-upload>
                </el-col>
                <el-col :span="2">
                  <el-button type="primary" @click="exportExcel()">导出Excel</el-button>
                </el-col>
              </el-row>
            </el-form>
            <!-- 表格 -->
            <el-table :data="pageStudents" border style="width: 100%" @selection-change="handleSelectionChange">>
              <el-table-column type="selection">
              </el-table-column>
              <el-table-column type="index" label="序号" width="60" align="center">
              </el-table-column>
              <el-table-column prop="sno" label="学号" width="80" align="center">
              </el-table-column>
              <el-table-column prop="name" label="姓名" width="80" align="center">
              </el-table-column>
              <el-table-column prop="gender" label="性别" width="60" align="center">
              </el-table-column>
              <el-table-column prop="birthday" label="出生日期" width="100" align="center">
              </el-table-column>
              <el-table-column prop="mobile" label="电话" width="120" align="center">
              </el-table-column>
              <el-table-column prop="email" label="邮箱" width="220" align="center">
              </el-table-column>
              <el-table-column prop="address" label="地址" align="center">
              </el-table-column>
              <el-table-column label="操作" width="180" align="center">
                <template slot-scope="scope">
                  <el-button type="success" icon="el-icon-more" size="mini" circle
                    @click="viewStudent(scope.row)"></el-button>
                  <el-button type="primary" icon="el-icon-edit" size="mini" circle
                    @click="updateStudent(scope.row)"></el-button>
                  <el-button type="danger" icon="el-icon-delete" size="mini" circle
                    @click="deleteStudent(scope.row)"></el-button>
                </template>
              </el-table-column>
            </el-table>
            <!-- 分页 -->
            <el-row style="margin-top: 20px;">
              <el-col :span="8" style="text-align: left;">
                <el-button type="danger" icon="el-icon-delete" @click="deleteStudents()">批量删除</el-button>
              </el-col>
              <el-col :span="16" style="text-align: right;">
                <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange"
                  :current-page="currentpage" :page-sizes="[5, 10, 50, 100]" :page-size="pagesize"
                  layout="total, sizes, prev, pager, next, jumper" :total="total">
                </el-pagination>
              </el-col>
            </el-row>
            <!-- 弹出框的学生明细表单 -->
            <el-dialog :title="dialogTitle" :visible.sync="dialogVisible" width="50%" :close-on-click-modal="false"
              @close="closeDialogForm('studentForm')">
              <el-form :model="studentForm" :inline="true" label-width="110px" label-position="right"
                style="margin-left:20px;" :rules="rules" ref="studentForm">
                <el-upload class="avatar-uploader" :show-file-list="false" action="" :disabled="isView"
                  style="text-align: center; margin:20px;" :http-request="uploadPicturePost">
                  <img v-if="studentForm.image" :src="studentForm.imageUrl" class="avatar">
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
                <el-form-item label="学号: " prop="sno">
                  <el-input v-model="studentForm.sno" suffix-icon="el-icon-edit"
                    :disabled="isEdit || isView"></el-input>
                </el-form-item>
                <el-form-item label="姓名: " prop="name">
                  <el-input v-model="studentForm.name" suffix-icon="el-icon-edit" :disabled="isView"></el-input>
                </el-form-item>
                <el-form-item label="性别" prop="gender">
                  <el-select v-model="studentForm.gender" placeholder="请选择性别" :disabled="isView">
                    <el-option label="男" value="男"></el-option>
                    <el-option label="女" value="女"></el-option>
                  </el-select>
                </el-form-item>
                <el-form-item label="出生日期: " prop="birthday">
                  <el-date-picker v-model="studentForm.birthday" type="date" placeholder="选择日期" style="width:93%"
                    :disabled="isView" value-format="yyyy-MM-dd">
                  </el-date-picker>
                </el-form-item>
                <el-form-item label="手机: " prop="mobile">
                  <el-input v-model="studentForm.mobile" suffix-icon="el-icon-edit" :disabled="isView"></el-input>
                </el-form-item>
                <el-form-item label="邮箱: " prop="email">
                  <el-input v-model="studentForm.email" suffix-icon="el-icon-edit" :disabled="isView"></el-input>
                </el-form-item>
                <el-form-item label="住址: " prop="address">
                  <el-input v-model="studentForm.address" suffix-icon="el-icon-edit" style="width:262%"
                    :disabled="isView"></el-input>
                </el-form-item>
              </el-form>
              <span slot="footer" class="dialog-footer">
                <el-button type="primary" v-show="!isView" @click="submitStudentForm('studentForm')">确 定</el-button>
                <el-button type="info" @click="closeDialogForm('studentForm')">取 消</el-button>
              </span>
            </el-dialog>
          </el-main>
          <el-footer style="height: 30px;">学生信息管理系统 版权所有: Jianliang Liu 2024-11-27</el-footer>
          <!-- 参考教程：Vue、Django前后端分离项目实战：学生管理系统+资料 Steven Wang 2020-10-10 -->
        </el-container>
      </el-container>
    </el-container>
  </div>
</body>

</html>
<!-- 引入Vue代码 -->
<script src=" js/index.js"></script>